<template>
  <div class="page white-stage">
  <top-filter :filterOptions="filterOptions" @change-filter="changeFilterValue"></top-filter>

  <scroller style="top: 44px" :on-infinite="load" :on-refresh="refresh" :noDataText="noDataText" ref="my_scroller">
    <div class="container grey">
      <div class="follows-list">
      <follow-item :custom_type="custom_type" v-for="(follow, index) in clues" :key="index" :follow="follow"></follow-item>
    </div>
    </div>
  </scroller>
  <crm-cover v-if="isShowCover" :hideCoverOnClick="true"></crm-cover>
  <router-link class="new-follow" :to="{path:'select-follow', query:{activeItem:activeItem, title:title, custom_type:custom_type}}">新增</router-link>
  </div>
</template>

<script>
  import Vue from 'vue'
  import { Cell, Group } from 'vux'
  import topFilter from '../components/top-filter'
  import dropdownOption from '../components/dropdown-option';
  import followItem from '../components/follow-item'
  import crmCover from '../components/crm-cover'
  import Scroller from 'vue-scroller'

  import {SHOW_COVER} from '../store/mutation-types';

  import store from '../store';


   export default{
    data() {

    let overHeight = document.body.scrollHeight+10;

    return {
      isMore: false,
      containerHeight : 'min-height:'+overHeight+'px;',
      page_size : 5,
      page_index: 1,
      clues:[] ,
      activeItem: 'h5marketing',
      originNoDataText:'暂无数据',
      noDataText:'',
      title:'',
      custom_type:0,
      clues:[
      // {
      //   avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg',
      //   socialname: '林丽勤',
      //   counselor : '陈芳芳',
      //   userType : 1,
      //   state: '0',
      //   position:'广东省广州市天河区华夏路',
      //   message: '妈妈上班，想让宝宝上托班，有人照顾并且能学习东西。',
      //   notiAvatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490024264917&di=098a459ac1645a1e4ce6f095bc8c3a65&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fd788d43f8794a4c274c8110d0bf41bd5ad6e3928.jpg',
      //   counselorLink:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
      //   followLink:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
      //   stateLink: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0',
      //   labels:[
      //     {
      //     name: '一岁半宝宝',
      //     link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
      //     },
      //
      //     {
      //     name: '金融',
      //     link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
      //     },
      //
      //     {
      //     name: '初步融洽',
      //     link: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3&step_word=&hs=2&pn=10&spn=0&di=0&pi=21202519877&rn=1&tn=baiduimagedetail&is=0%2C36045&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=750690187%2C2913691576&os=&simid=&adpicid=0&lpn=0&ln=33820&fr=&fmq=1489826129137_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=girl&bdtype=-1&oriquery=&objurl=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2Fb151f8198618367a9f738e022a738bd4b21ce573.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3F4_z%26e3B08ma_z%26e3Bv54AzdH3F4jtgeAzdH3Fd8ccnAzdH3F&gsm=&rpstart=0&rpnum=0'
      //     },
      //   ]
      // },
      ],

      filterOptions:[]
    }
    },

    components:{
    topFilter,
    Cell,
    Group,
    dropdownOption,
    followItem,
    crmCover,
    Scroller
    },

    mounted() {
    console.debug('this.$route.query', JSON.stringify(this.$route.query));

    let query = this.$route.query;
    this.custom_type = query.custom_type;
    this.activeItem = query.activeItem;

    // this.getClues();

    this.filterOptions = this.gbfilterOptions;
    this.noDataText = this.originNoDataText;

    this.callJsApi('biz.navigation.setTitle',{title:query.title});
    },

    methods: {
    refresh (iscroll) {
      this.getClues();
      // Refresh current data
    },

    log () {
      console.log('ee');
    },

    load (iscroll) {
      this.getClues();
    },

    test () {
      console.log('test')
    },

    //筛选器
    changeFilterValue(filterOptions){
      console.log('qqqq')
      var submitData = {};
      this.page_index = 0;
      filterOptions.forEach(function(object, index){
      if(object.options) {
        object.options.forEach(function(secObject, secIndex){
        submitData[secObject.name] = secObject.checked;
        });
      }
      else {
        submitData[object.name] = object.checked;
      }
      });

      this.filterData = submitData;

      this.getClues();
    },

    getClues(data) {
      let that = this;

      var data = Object.assign({
        page_size : this.page_size,
        custom_type : this.custom_type,
        page_index : this.page_index,
        who: 'own',
      }, this.filterData,  data || {});

      console.log('getClus', JSON.stringify(data))

      store.dispatch('getClues', data).then(function(response) {
        if(response.data.errcode === 0) {
        console.debug('response.data.results.data', JSON.stringify(response.data.results.data))
        setTimeout(() => {
          that.clues = that.clues.concat(response.data.results.data);
          setTimeout(() => {
          if (that.$refs.my_scroller) {
            that.$refs.my_scroller.finishInfinite(true);
            that.$refs.my_scroller.finishPullToRefresh();
            that.page_index++;
          }
          }, 200)
        }, 1000)

        if(that.clues.length) {
          that.noDataText = '';
        }
        } else {
        console.debug('系统服务异常！请联系管理员!', JSON.stringify(response.data));
        }
      });

      // 测试数据
      // let response = {
      //   "errcode": 0,
      //   "errmsg": "接口调用成功!",
      //   "results": {
      //   "total": 6,
      //   "per_page": 2,
      //   "current_page": 2,
      //   "last_page": 3,
      //   "from": 3,
      //   "to": 4,
      //   "data": [
      //     {
      //     "id": 9,
      //     "custom_id": 1,
      //     "suid": 1,
      //     "uid": null,
      //     "clue_desc": "线索描述，电话跟进了王子宝宝4",
      //     "clue_tpl_id": null,
      //     "clue_type": "DH#",
      //     "clue_insert_type": "RG#",
      //     "location_j": "113.329084",
      //     "location_w": "23.13188",
      //     "clue_location": "广东广州富力盈通",
      //     "next_time": "2016-07-12 22:32:04",
      //     "status": "OK##",
      //     "insert_time": "2017-03-23 19:26:51",
      //     "update_time": null,
      //     "nick_name": null,
      //     "head_img_url": 'http://img4.imgtn.bdimg.com/it/u=3364481296,3190728730&fm=11&gp=0.jpg',
      //     "mobile_num": "18620300370",
      //     "parent_name": "王雪兵",
      //     "imgs": [
      //       {
      //       "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
      //       },
      //       {
      //       "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
      //       }
      //     ]
      //     },
      //     {
      //     "id": 8,
      //     "custom_id": 1,
      //     "suid": 1,
      //     "uid": null,
      //     "clue_desc": "线索描述，电话跟进了王子宝宝3",
      //     "clue_tpl_id": null,
      //     "clue_type": "DH#",
      //     "clue_insert_type": "RG#",
      //     "location_j": "113.329084",
      //     "location_w": "23.13188",
      //     "clue_location": "广东广州富力盈通",
      //     "next_time": "2016-07-12 22:32:04",
      //     "status": "OK##",
      //     "insert_time": "2017-03-24 19:26:48",
      //     "update_time": null,
      //     "nick_name": null,
      //     "head_img_url": 'http://img1.imgtn.bdimg.com/it/u=2540796225,385730206&fm=23&gp=0.jpg',
      //     "mobile_num": "18620300370",
      //     "parent_name": "王雪兵",
      //     "imgs": [
      //       {
      //       "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
      //       },
      //       {
      //       "url": "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489838952537&di=4c3fd0bad205ed237e850ca4ee4ddcdc&imgtype=0&src=http%3A%2F%2Ff.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F279759ee3d6d55fbdf1e87f969224f4a21a4dd11.jpg"
      //       }
      //     ]
      //     }
      //   ]
      //   }
      // };
      //
      // if(response.errcode === 0) {
      //
      //   let that = this;
      //
      //   this.clues = this.clues.concat(response.results.data);
      //
      // } else {
      //   alert('系统服务异常！请联系管理员!');
      // }
    },

    },

    computed:{

    isShowCover () {
      return this.$store.state.app.isShowCover
    },

    gbfilterOptions() {
      return this.$store.state.app.filterOptions;
    }

    }

   }
</script>

<style lang="less">

  .follow-pdt{
  padding-top: 40px;
  }

  .new-follow{
  background-color: #35ADFF;
  color: white;
  position: fixed;
  z-index: 80;
  bottom: 30px;
  right: 26px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 50%;
  padding: 2px;
  border: none;
  outline: none;
  box-shadow: 0 0 10px rgba(0,0,0,.15);
  font-weight: 700;
  display: block;
  line-height: 38px;
  text-align: center;

  }
</style>
